<template>
  <div>

    <!-- 模糊搜索的表单 -->
    <el-form 
      @submit.native.prevent
      :inline="true" class="demo-form-inline">
      <el-form-item label="姓名">
        <el-input 
          @keyup.native.enter="search"
          v-model="name" placeholder="请输入姓名关键字"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search">查询</el-button>
      </el-form-item>
    </el-form>

    <el-divider content-position="left">演员列表</el-divider>

    <!-- 演员列表显示 -->
    <person 
      v-for="item in actors" :key="item.id"
      @delete="delPerson(item.id)"
      @myevent="doEvent"
      :name="item.actor_name"
      :avatar="item.actor_avatar"></person>

  </div>
</template>

<script>
import myaxios from '@/http/MyAxios'
import Person from '@/components/Person.vue';
import httpApi from '@/http/index'

export default {
  components: { Person },

  data() {
    return {
      actors: [],  // 保存所有的演员列表
      name: '',    // 双向数据绑定name输入框
    }
  },

  methods: {
    doEvent(e){
      console.log('myevent:', e)
    },

    delPerson(id){
      console.log('点击了叉子，在此捕获了delete事件,删除id:'+id)
      // 发送http请求，删除这个演员，必须得获取当前点击的演员的id
      httpApi.ActorApi.delete({id}).then(res=>{
        if(res.data.code == 200){ // 删除成功
          this.$message({type:'success', message:'恭喜你，删除成功'})
          this.search() //重新查询列表
        }
      })
    },

    /** 点击查询按钮后执行，需要判断输入框中是否有关键字 */
    search(){
      if(this.name.trim()==''){  // 没有关键字
        this.listActors()
      }else{  // 有关键字
        this.listActorsByName()
      }
    },

    /** 通过姓名关键字查询演员列表 */
    listActorsByName(){
      httpApi.ActorApi.queryActorsByNameLike({name:this.name}).then(res=>{
        console.log('模糊查询的结果', res)
        this.actors = res.data.data
      })
    },

    /** 呈现演员列表 */ 
    listActors() {
      httpApi.ActorApi.queryAllActors().then(res=>{
        this.actors = res.data.data
      })
    }
  },
  // 页面挂在完毕后，发送请求，加载列表数据
  mounted(){
    this.listActors()   // 加载演员列表
  }
};
</script>

<style lang="scss" scoped></style>
